<template>
  <div class="fllistmodo">
    <header class="bookxq">
      <div class="title">
        <router-link to="/book/fllist" class="left">
          <span class="ui-leftaw-2"></span>
        </router-link>
        <div class="tit-top">
          <h3>{{ list_title }}</h3>
          <router-link to="/home" class="home">首页</router-link>
        </div>
      </div>
    </header>
    <div class="load">
      <div class="nav-body" @click="getdate">
        <div class="select-panel">
          <ul>
            <li class="time" v-if="sorts.length > 0">
              <span class="select-label">时间：</span>
              <span v-for="item in sorts">
                <router-link to class="tag" :index="item.value">{{
                  item.name
                }}</router-link>
              </span>
            </li>
            <li class="jdu" v-if="bookStatuss.length > 0">
              <span class="select-label">进度：</span>
              <span v-for="item in bookStatuss">
                <router-link to class="tag" :index="item.value">{{
                  item.name
                }}</router-link>
              </span>
            </li>
            <li class="jiage" v-if="pays.length > 0">
              <span class="select-label">价格：</span>
              <span v-for="item in pays">
                <router-link to class="tag" :index="item.value">{{
                  item.name
                }}</router-link>
              </span>
            </li>
            <li class="texl" v-if="bookStatuss.length > 0">
              <span class="select-label h1 textleng">字数：</span>
              <div class="text">
                <span v-for="item in wordCounts">
                  <router-link to class="tag" :index="item.value">{{
                    item.name
                  }}</router-link>
                </span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <loading v-if="isLoading"></loading>
      <div class="modo-body">
        <div class="booklist">
          <ul>
            <li v-for="(item, k) in book_list">
              <router-link :to="`/cs?id=${item.id}&title=${item.title}`">
                <div class="book-1">
                  <img v-load="item.cover" :src="error" alt="" />
                </div>
                <div class="text-1">
                  <h4>{{ item.title }}</h4>
                  <p class="name-1">
                    {{ item.author }}|<span>{{ item.category }}</span>
                  </p>
                  <p class="p-1">简介:{{ item.content }}</p>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { reFunc, fllistFunc } from "@/request/index";
import Loading from "@/components/loading/index.vue";
import error from "@/assets/noimg.png";
export default {
  directives:{
    load(el,options){
      let img = new Image()
      img.src = options.value;
      img.onload=()=>{
        el.src =options.value
      }
    }
  },
  data() {
    return {
      error,
      list_title: this.$route.query.list_title,
      list_url: decodeURI(this.$route.query.url),
      book_list: [],
      bsllist: [],
      data: [],
      subCat: [],
      bookStatuss: [],
      wordCounts: [],
      pays: [],
      sorts: [],
      pay: this.$route.query.pay,
      bookStatus: this.$route.query.bookStatus,
      wordCount: this.$route.query.wordCount,
      sort: this.$route.query.sort,
      isLoading: true,
    };
  },
  components: { Loading },
  methods: {
    async url() {
      let url = this.list_url;
      await reFunc(url).then((lis) => {
        // console.log(lis.categories);
        let lix = lis.categories;
        this.bsllist = lix.map((item) => {
          // console.log(item)
          return item.catArray;
        });
        let data = lix;
        // console.log(data)
        let data1 = data.filter((item) => {
          if (item.type == "subCat") {
            return item.type == "subCat";
          }
        });
        if (data1[0] !== undefined) {
          this.subCat = data1[0].catArray;
        }
        // console.log(this.subCat)
        let data2 = data.filter((item) => {
          if (item.type == "pay") {
            return item.type == "pay";
          }
        });
        // console.log(payss)
        if (data2[0] !== undefined) {
          this.pays = data2[0].catArray;
        }
        // console.log(this.pays)
        let data3 = data.filter((item) => {
          if (item.type == "sort") {
            return item.type == "sort";
          }
        });
        if (data3[0] !== undefined) {
          this.sorts = data3[0].catArray;
        }
        // console.log(this.sorts);
        let data4 = data.filter((item) => {
          if (item.type == "bookStatus") {
            return item.type == "bookStatus";
          }
        });
        if (data4[0] !== undefined) {
          this.bookStatuss = data4[0].catArray;
        }
        // console.log( this.bookStatuss);
        let data5 = data.filter((item) => {
          if (item.type == "wordCount") {
            return item.type == "wordCount";
          }
        });
        if (data5[0] !== undefined) {
          this.wordCounts = data5[0].catArray;
        }
        // console.log(this.sorts);
        let urls = url.split("=");
        let pays = this.pay;
        let bookStatuss = this.bookStatus;
        let wordCounts = this.wordCount;
        let sorts = this.sort;
        // .getAttribute('index')
        // console.log(urls[1]);
        fllistFunc(urls[1], pays, bookStatuss, wordCounts, sorts).then(
          (res) => {
            // console.log();
            let t = document.querySelectorAll(".time .tag");
            t.forEach((item, x) => {
              if (item.getAttribute("index") == this.sort) {
                item.classList.add("select");
              }
            });
            let j = document.querySelectorAll(".jdu .tag");
            j.forEach((item, x) => {
              if (item.getAttribute("index") == this.bookStatus) {
                item.classList.add("select");
              }
            });
            let tx = document.querySelectorAll(".texl .tag");
            tx.forEach((item, x) => {
              if (item.getAttribute("index") == this.wordCount) {
                item.classList.add("select");
              }
            });
            let jg = document.querySelectorAll(".jiage .tag");
            jg.forEach((item, x) => {
              if (item.getAttribute("index") == this.pay) {
                item.classList.add("select");
              }
            });
            // console.log(res.list);
            let data = res.list;
            this.book_list = data;
            this.isLoading = false;
          }
        );
      }).catch(err => {
          console.log("请求失败...");
        });
    },
    getdate(e) {
      e = e || window.event;
      if (e.target.tagName === "A") {
        this.show = true;
        console.log(e.target.parentNode.parentNode.className);
        let t = document.querySelectorAll(".time .tag");
        t.forEach((item, x) => {
          if (item.getAttribute("index") == this.sort) {
            item.classList.add("select");
          }
        });
        let j = document.querySelectorAll(".jdu .tag");
        j.forEach((item, x) => {
          if (item.getAttribute("index") == this.bookStatus) {
            item.classList.add("select");
          }
        });
        let tx = document.querySelectorAll(".texl .tag");
        tx.forEach((item, x) => {
          if (item.getAttribute("index") == this.wordCount) {
            item.classList.add("select");
          }
        });
        let jg = document.querySelectorAll(".jiage .tag");
        jg.forEach((item, x) => {
          if (item.getAttribute("index") == this.pay) {
            item.classList.add("select");
          }
        });
        // console.log(e.target.getAttribute('index'))
        if (e.target.parentNode.parentNode.className === "time") {
          // console.log(e.target.parentNode.parentNode.className);
          this.sort = e.target.getAttribute("index");
          let t = document.querySelectorAll(".time .tag");
          t.forEach((item, x) => {
            item.classList.remove("select");
            if (item.getAttribute("index") == this.sort) {
              item.classList.add("select");
              console.log(e.target.getAttribute("index"));
              console.log(this.sort);
            }
          });
        }
        if (e.target.parentNode.parentNode.className === "jdu") {
          console.log(e.target.parentNode.parentNode.className);
          this.bookStatus = e.target.getAttribute("index");
          let j = document.querySelectorAll(".jdu .tag");
          j.forEach((item, x) => {
            item.classList.remove("select");
            if (item.getAttribute("index") == this.bookStatus) {
              item.classList.add("select");
            }
          });
        }
        if (e.target.parentNode.parentNode.parentNode.className === "texl") {
          console.log(e.target.parentNode.parentNode.className);
          this.wordCount = e.target.getAttribute("index");
          let tx = document.querySelectorAll(".texl .tag");
          console.log(tx);
          tx.forEach((item, x) => {
            item.classList.remove("select");
            if (item.getAttribute("index") == this.wordCount) {
              item.classList.add("select");
            }
          });
        }
        if (e.target.parentNode.parentNode.className === "jiage") {
          console.log(e.target.parentNode.parentNode.className);
          this.pay = e.target.getAttribute("index");
          let jg = document.querySelectorAll(".jiage .tag");
          jg.forEach((item, x) => {
            item.classList.remove("select");
            if (item.getAttribute("index") == this.pay) {
              item.classList.add("select");
            }
          });
        }
        let pays = this.pay;
        let bookStatuss = this.bookStatus;
        let wordCounts = this.wordCount;
        let sorts = this.sort;
        let titles = this.list_title;
        let urls = this.list_url;
        this.$router.push(
          `/fl/fls?list_title=${titles}&url=${urls}&pay=${pays}&bookStatus=${bookStatuss}&wordCount=${wordCounts}&sort=${sorts}`
        );
        this.$router.go(0);
      }
    },
  },
  created() {
    // console.log(this.$route.query);
    this.url();
  },
};
</script>
<style lang="scss">
@import url(../static/css/reset.css);
.fllistmodo {
  .bookxq {
    width: 100%;
    background-color: black;
    min-width: 362px;
    .title {
      margin: auto 1%;
      height: 44px;
      line-height: 44px;
      a.left {
        float: left;
        font-size: 14px;
        .ui-leftaw-2 {
          display: inline-block;
          margin-bottom: 3px;
          margin-left: 15px;
          margin-right: 15px;
          vertical-align: middle;
          width: 10px;
          height: 18px;
          background: url(../static/imgs/arrow-left.png);
          background-size: 100% 100%;
        }
      }
      .tit-top {
        padding: 0 2%;
        box-sizing: border-box;
        text-align: center;
        h3 {
          width: 80%;
          display: inline-block;
          color: white;
        }
        a {
          display: inline-block;
          &.home {
            width: 10%;
            height: 28px;
            line-height: 28px;
            color: #fff;
            background: #000;
            font-size: 15px;
            padding: 0;
            text-align: right;
          }
        }
      }
    }
  }
  .nav-body {
    background-color: #ebe8e6;
    .select-panel {
      display: inline-block;
      font-size: 14px;
      color: #333;
      padding: 0px 15px 0px;
      border-bottom: 1px solid #d1cfcd;
      ul {
        li {
          line-height: 30px;
          height: 31px;
          display: table;
          span {
            float: left;
            .tag {
              display: inline-block;
              font-size: 14px;
              color: #fff;
              height: 19px;
              line-height: 19px;
              box-sizing: content-box;
              padding: 1px 5px;
              background-color: #bab6b3;
              text-align: center;
              border-radius: 4px;
              margin-right: 8px;
              &.select {
                background-color: #c9483c;
              }
            }
          }
          .text {
            width: 70%;
            display: inline-block;
          }
        }
      }
    }
  }

  .booklist {
    width: 100%;
    // background: black;
    ul {
      li {
        margin-top: 5px;
        display: flex;
        box-sizing: content-box;
        border-bottom: #dcdcdc solid 1px;
        [class^="book"] {
          width: 93px;
          margin: 9px;
          float: left;
          img {
            width: 94px;
            height: 131.6px;
            border-radius: 5px;
          }
        }
        [class^="text"] {
          padding-top: 10px;
          color: #333;
          outline: none;
          padding-left: 10px;
          text-align: start;
          h4 {
            font-size: 15px;
            line-height: 19px;
            height: 38px;
            max-height: 38px;
          }
          [class^="name"] {
            color: #888;
            line-height: 15px;
            height: 15px;
            font-size: 12px;
            margin-bottom: 5px;
            -webkit-line-clamp: 2;
            overflow: hidden;
            span {
              margin-left: 2px;
            }
          }
          [class^="p"] {
            color: #888;
            line-height: 18px;
            height: 36px;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>